Skip to content
Theo Brandt
All projects

Northlight

A design system for a clinical product, where getting a colour wrong is a safety issue.

Design system

2024

Northlight is the design system behind a clinical documentation product used in hospital wards. The constraints were unlike anything I had worked with, and they made almost every decision for me.

The constraints

  • Ward lighting is bright, cold, and unflattering, and the screens are old and often at an angle
  • Users are standing, interrupted, and frequently wearing gloves
  • Red and amber carry clinical meaning and cannot be spent on anything else

That third constraint was the one that shaped the palette. In most products, a warning colour is a design choice. Here it is a signal with a defined meaning, and using amber for a marketing banner would have been a genuine hazard. So the system has two colour vocabularies — a neutral one for interface, and a clinical one that only the clinical components can reach.

Bigger than it looks

Every target is at least fifty-six pixels, every body size starts at seventeen, and every contrast ratio clears AAA rather than AA. The system looks slightly oversized on a designer's laptop. On a wall-mounted screen at two metres, under a fluorescent tube, it looks correct.

That gap is the lesson I took away. A design system is calibrated to a room, and if you have not been in the room you are calibrating to your own desk.

Say hello

I read everything and reply to most of it. Notes about something I wrote are especially welcome, particularly the ones telling me I am wrong.

theo@theobrandt.co